<template>
    <view class="container">
        <intake-nav-bar title="立即认证" dark :fixed="true" />
        <!-- 进度条 -->
        <view class="progress">
            <view class="progress-item active">
                <view class="progress-dot active">
                    <view class="progress-dot-min"></view>
                </view>
                <text class="progress-text">个人信息</text>
            </view>
            <view class="progress-item">
                <view class="progress-dot">
                    <view class="progress-dot-min"></view>
                </view>
                <text class="progress-text">添加银行</text>
            </view>
            <view class="progress-item">
                <view class="progress-dot">
                    <view class="progress-dot-min"></view>
                </view>
                <text class="progress-text">完成认证</text>
            </view>
            <view class="progress-line">
            </view>
            <view class="progress-line-active"></view>
        </view>

        <!-- 表单区域 -->
        <view class="form-container">
            <view class="form-tip">请您使用有效身份证信息认证</view>
            <view class="form-container-main">
                <view class="form-group">
                    <input class="form-input" type="text" v-model="real_name" placeholder="姓名" />
                </view>

                <!-- <view class="form-group">
                    <input class="form-input" type="text" placeholder="生日" />
                </view> -->

                <view class="form-group">
                    <input class="form-input" v-model="idCardNo" type="text" placeholder="证件号码" />
                </view>

                <view class="upload-container">
                    <view class="upload-item">
                        <image v-if="!imageUrlZ" :src="idCardz" @click="seletIdCard('zm')"></image>
                        <image v-else :src="imageUrlZ" @click="seletIdCard('zm')"></image>
                    </view>
                    <view class="upload-item">
                        <image v-if="!imageUrlF" :src="idCardf" @click="seletIdCard('fm')"></image>
                        <image v-else :src="imageUrlF" @click="seletIdCard('fm')"></image>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部按钮 -->
        <button class="submit-btn" @click="next()">下一步</button>
    </view>
</template>

<script>
import { basicFileSignConfig } from "@/api/public";
import { saveVerification } from "@/api/user/userScore";
export default {
    data() {
        return {
            idCardz: this.$common.imgUrl() + '/images/member/id_card_f@2x.png',
            idCardf: this.$common.imgUrl() + '/images/member/id_card_z@2x.png',
            imageUrlZ: '',
            imageUrlF: '',
            idCardNo: '',
            real_name: '',
            userId:''
            // 您可以在这里添加更多的数据绑定
        };
    },
    async onLoad(query) {
        this.userId  = JSON.parse(uni.getStorageSync('USER_INFO')).id
        this.getFileSign()
    },
    methods: {
        getFileSign() {
            basicFileSignConfig({ dir: "device" }).then(res => {
                console.log("res", res.data)
                this.oss_list = res.data;
            })
        },
        next() {
            const data = {
                "real_name": this.real_name,
                "id_card_number": this.idCardNo,
                "id_card_front": this.imageUrlZ,
                "id_card_back": this.imageUrlF,
            }
           
            if (!this.real_name || !this.idCardNo || this.imageUrlZ === '' || this.imageUrlF === '') {
                uni.showToast({
                    icon: 'none',
                    title: '请完善个人信息',
                })
            }else{  
                if (/^[1-9]\d{5}(18|19|(\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.idCardNo)) {
                    saveVerification(data).then(res => {
                        if (res.status === 0) {
                            uni.showToast({
                                icon: 'none',
                                title: '保存成功',
                            })
                            this.$common.navTo('/pages/users_purchasing/user_bank/step2?imageUrlZ='+this.imageUrlZ+'&imageUrlF='+this.imageUrlF+'&name='+this.real_name+'&idCardNo='+this.idCardNo);
                        }
                    })
                } else {
                    return this.$utils.Tips({
                        title: '请输入正确身份证号'
                    });
                }
            }
            // this.$common.navTo('/pages/users_purchasing/user_bank/step2')
        },
        seletIdCard(code) {
            let url = this.oss_list.host;
            let  suffix = '.png'// 文件后缀
            let filename = code === 'zm' ? this.userId + this.idCardNo+'z': this.userId + this.idCardNo+'f'
            const fileKey = this.oss_list.dir + filename
            uni.chooseImage({
                count: 1,
                success: (res) => {
                    if (code === 'zm') {
                        this.imageUrlZ = res.tempFilePaths[0];
                    } else {
                        this.imageUrlF = res.tempFilePaths[0];
                    }
                    uni.uploadFile({
                        url, //仅为示例，非真实的接口地址
                        filePath: code === 'zm' ? this.imageUrlZ :this.imageUrlF,
                        formData: {
                            'key': fileKey,
                            'policy': this.oss_list.policy,
                            'OSSAccessKeyId': this.oss_list.accessid,
                            'signature': this.oss_list.signature,
                            'success_action_status': '200',
                        },
                        name: 'file',
                        success: (uploadFileRes) => {
                            console.log("uploadFileRes", uploadFileRes)
                            if (uploadFileRes.statusCode == 200) {
                                let file_path = this.oss_list.cdn_host +'/'+ fileKey;
                                console.log('========',file_path)
                                if (code === 'zm') {
                                    this.imageUrlZ = this.oss_list.cdn_host +'/'+ fileKey;
                                } else {
                                    this.imageUrlF = this.oss_list.cdn_host +'/'+ fileKey;
                                }
                            } else {
                                uni.showToast({
                                    icon: 'none',
                                    title: '视频格式不支持',
                                })
                                return false
                            }

                        }
                    })
                }
            });
        }
    }
};
</script>
<style lang="scss">
.container {
    width: 100%;
    height: 100vh;
    // text-align: center;
    padding: 20px;
    background: linear-gradient(to bottom, #E3EAFB 0%, transparent 100%);

    .container {
        min-height: 100%;
        background-color: #F5F7FA;
        display: flex;
        flex-direction: column;
    }

    .header {
        height: 88rpx;
        display: flex;
        align-items: center;
        background-color: #FFFFFF;
        padding: 0 32rpx;
        position: relative;
    }

    .back-icon {
        width: 40rpx;
        height: 40rpx;
    }

    .title {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        font-weight: 500;
        color: #333333;
    }

    .progress {
        height: 120rpx;
        // background-color: #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 60rpx;
        position: relative;
    }

    .progress-line {
        width: 680rpx;
        position: absolute;
        top: 20%;
        left: 0rpx;
        right: 100rpx;
        height: 18rpx;
        background-color: #fff;
        z-index: 1;
    }

    .progress-line-active {
        position: absolute;
        top: 20%;
        left: 0rpx;
        right: 100rpx;
        height: 18rpx;
        background-color: #C3D5FE;
        width: 100rpx;
        z-index: 1;
    }

    .progress-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
    }

    .progress-dot {
        width: 28rpx;
        height: 28rpx;
        border-radius: 50%;
        background-color: #9EA5B3;
        margin-bottom: 16rpx;

        .progress-dot-min {
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            margin: 6.5rpx auto;
            background-color: #4A5A78;
        }
    }

    .progress-dot.active {
        background-color: #A0BBFC;

        .progress-dot-min {
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            margin: 6.5rpx auto;
            background-color: #0066FF;
        }
    }

    .progress-text {
        font-size: 14px;
        color: #666666;
    }

    .form-container {
        flex: 1;
        background-color: #FFFFFF;
        margin-top: 20rpx;

        // padding: 32rpx;
        .form-container-main {
            padding: 38rpx 64rpx;
        }
    }

    .form-tip {
        background-color: #0066FF;
        color: #FFFFFF;
        padding: 24rpx;
        border-radius: 8rpx 8px 0 0;
        font-size: 28rpx;
        // margin-bottom: 32rpx;
    }

    .form-group {
        margin-bottom: 24rpx;
    }

    .form-input {
        height: 96rpx;
        border: 2rpx solid #E5E7EB;
        background-color: #F4F7FE;
        border-radius: 8rpx;
        padding: 0 24rpx;
        font-size: 14px;
    }

    .upload-container {
        display: flex;
        justify-content: space-between;
        margin-top: 48rpx;
    }

    .upload-item {
        width: 242rpx;
        height: 150rpx;
        border: 2rpx dashed #E5E7EB;
        border-radius: 8rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        image {
            width: 242rpx;
            height: 150rpx;
        }
    }

    .camera-icon {
        width: 56rpx;
        height: 56rpx;
        margin-bottom: 16rpx;
    }

    .upload-text {
        font-size: 12px;
        color: #999999;
    }

    .submit-btn {
        width: 563rpx;
        height: 96rpx;
        background-color: #0066FF;
        color: #FFFFFF;
        font-size: 16px;
        margin: 44rpx auto;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>